<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>导航条中的按钮、文本和链接</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：

1、导航条中的按钮navbar-btn
2、导航条中的文本navbar-text
3、导航条中的普通链接navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。
-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
	 <ul class="nav navbar-nav">
	 	<li><a href="##" class="navbar-text">Navbar Text</a></li>
	 	<li><a href="##" class="navbar-text">Navbar Text</a></li>
	 	<li><a href="##" class="navbar-text">Navbar Text</a></li>
	 </ul>
</div>

<!--使用两个导航条的时候,其中一个导航条样式就出现异常-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
	 <div class="nav navbar-nav">
	 	<a href="##" class="navbar-text">Navbar Text</a>
	 	<a href="##" class="navbar-text">Navbar Text</a>
	 	<a href="##" class="navbar-text">Navbar Text</a>
	 </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>